<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="userDialogFormRef" :model="state.content" :rules="formRules" size="default" label-width="90px">
				<el-row :gutter="35" v-if="state.dialog.type === 'edit'">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="onePwd" label="新密码">
							<el-input type="password" v-model="state.content.onePwd" placeholder="请输入密码"
								clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="twoPwd" label="确认密码">
							<el-input type="password" v-model="state.content.twoPwd" placeholder="再次输入密码"
								clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="35" v-if="state.dialog.type === 'bind'" style="display: flex;justify-content: center;">
					<vue-qrcode :value="state.content.wechat" alt=""></vue-qrcode>
				</el-row>
			</el-form>
			<template #footer v-if="state.dialog.type === 'edit'">
				<span class="dialog-footer">
					<el-button @click="onSubmit" type="success" size="default">{{ t('message.btnName.submit') }}</el-button>
					<el-button @click="onCancel" size="info">{{ t('message.btnName.cancel') }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import {  useSystemPersonalUpdateInfoApi } from '/@/api/system/personal';
// import { editPwd } from '/@/api/person/org';


// 定义子组件向父组件传值/事件
const { t } = useI18n();
const emit = defineEmits(['refresh']);

// 定义变量内容
const userDialogFormRef = ref();
const useContent = () => {
	return {
		onePwd: '', // 账户名称
		twoPwd: '', // 用户姓名
		wechat: '尚未开通此功能'
	}
}
const state = reactive({
	content: useContent() as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
	}
});

// 表单校验
const formRules = ref({
	name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
})
// 打开弹窗
const openDialog = (option: string) => {
	if (option === 'edit') {
		state.dialog.type = 'edit';
		state.dialog.title = '修改密码';
	}
	if (option === 'bind') {
		state.dialog.type = 'bind';
		state.dialog.title = '扫码绑定';
	}
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
	state.content = useContent()
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	userDialogFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		if (state.content.onePwd !== state.content.twoPwd) {
			ElMessage.error('两次密码不一致')
			return
		} else {
			//TODO
			useSystemPersonalUpdateInfoApi({ password: state.content.twoPwd }).then(() => {
				ElMessage.success('修改成功')
				closeDialog();
				state.content = useContent()
			})
		}
	})
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
